<template>
	<view class="ob-empty">
		<view class="ob-empty__content">
			<!-- 图标 -->
			<view class="ob-empty__icon">
				<image v-if="image" :src="image" class="ob-empty__image" mode="aspectFit"></image>
				<text v-else class="ob-empty__emoji">{{ icon }}</text>
			</view>
			
			<!-- 文字内容 -->
			<view class="ob-empty__text">
				<text class="ob-empty__title">{{ title }}</text>
				<text v-if="description" class="ob-empty__description">{{ description }}</text>
			</view>
			
			<!-- 操作按钮 -->
			<view v-if="showButton" class="ob-empty__action">
				<button 
					class="ob-empty__button" 
					:class="{ 'ob-empty__button--primary': buttonType === 'primary' }"
					@click="handleButtonClick"
				>
					{{ buttonText }}
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
	// 标题
	title: {
		type: String,
		default: '暂无数据'
	},
	// 描述文字
	description: {
		type: String,
		default: ''
	},
	// 图标（emoji）
	icon: {
		type: String,
		default: '📦'
	},
	// 图片
	image: {
		type: String,
		default: ''
	},
	// 是否显示按钮
	showButton: {
		type: Boolean,
		default: false
	},
	// 按钮文字
	buttonText: {
		type: String,
		default: '刷新'
	},
	// 按钮类型
	buttonType: {
		type: String,
		default: 'default', // default, primary
		validator: (value) => ['default', 'primary'].includes(value)
	}
})

const emit = defineEmits(['button-click'])

const handleButtonClick = () => {
	emit('button-click')
}
</script>

<style lang="scss" scoped>
.ob-empty {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 200px;
	padding: 40px 20px;
	
	&__content {
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		max-width: 300px;
	}
	
	&__icon {
		margin-bottom: 16px;
		
		.ob-empty__image {
			width: 80px;
			height: 80px;
		}
		
		.ob-empty__emoji {
			font-size: 48px;
			line-height: 1;
		}
	}
	
	&__text {
		margin-bottom: 20px;
	}
	
	&__title {
		display: block;
		font-size: 16px;
		font-weight: 500;
		color: var(--text-color);
		margin-bottom: 8px;
	}
	
	&__description {
		display: block;
		font-size: 14px;
		color: var(--text-secondary);
		line-height: 1.5;
	}
	
	&__action {
		width: 100%;
	}
	
	&__button {
		width: 120px;
		height: 40px;
		border: 1px solid var(--border-color);
		border-radius: 20px;
		background-color: var(--white);
		color: var(--text-color);
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
		
		&--primary {
			background-color: var(--primary-color);
			border-color: var(--primary-color);
			color: var(--white);
		}
		
		&::after {
			border: none;
		}
	}
}
</style>